<!--
  增删改查示例
  @author 邵鹏坤 2022年9月22日
  1 功能解析：
    1.1 列表展示
      1.1.1 数据源：示例
        tableData：Array<{
          name:'张三'，
          height:180，
          weight:200，
          birth:’2022-9-22 21：02：30，
          ...
        }>
    1.2 ...
  2 数据源：
-->
<template>
  <WinContainer right-width="18%" :dialogStatus="props.dialogStatus" :right-visible="false">
    <template #main
      ><div class="main">
        <ExampleTitle title="全局消息通知message示例"></ExampleTitle>
        <ExampleTitle title="基础状态" :row="true"> </ExampleTitle>
        <div class="row-container">
          <Button @click="openMessage('info')">info</Button>
          <Button type="success" @click="openMessage('success')">success</Button>
          <Button type="warning" @click="openMessage('error')">error</Button>
          <Button type="danger" @click="openMessage('warning')">warning</Button>
          <Button type="custom" color="#27d0dc" @click="openMessage('loading')">loading</Button>
        </div>
        <MD file-name="basicMessage"></MD>
        <ExampleTitle title="常显状态" :row="true"> </ExampleTitle>
        <div class="row-container">
          <Button type="success" @click="openMessage('loading-success')">success</Button>
        </div>
        <MD file-name="alwaysMessage"></MD>
        <ExampleTitle title="自定义持续时长状态" :row="true"> </ExampleTitle>
        <div class="row-container">
          <Button @click="openMessageDuration('info')">info</Button>
          <Button type="success" @click="openMessageDuration('success')">success</Button>
          <Button type="warning" @click="openMessageDuration('error')">error</Button>
        </div>
        <MD file-name="durationMessage"></MD>
        <ExampleTitle title="加载切换状态" :row="true"> </ExampleTitle>
        <div class="row-container">
          <Button @click="openLoadingMessage('info')">info</Button>
          <Button type="success" @click="openLoadingMessage('success')">success</Button>
          <Button type="warning" @click="openLoadingMessage('error')">error</Button>
          <Button type="danger" @click="openLoadingMessage('warning')">warning</Button>
        </div>
        <MD file-name="loadingMessage"></MD></div
    ></template>
    <template #aside-right><div class="right">侧边容器</div></template>
  </WinContainer>
</template>

<script setup lang="ts">
  import WinContainer from '@/views/container/winContainer.vue'
  import Button from '@/views/button/components/button.vue'
  import ExampleTitle from '@/views/components/exampleTitle.vue'
  import { defineProps } from 'vue'
  import Message from '@/views/message/message'
  import MD from '@/views/components/md.vue'
  const props = defineProps(['dialogStatus'])
  const openMessageDuration = (flag: string) => {
    switch (flag) {
      case 'success':
        return Message({
          type: 'success',
          message: '成功，1.6s后关闭',
          duration: 1600
        })
      case 'error':
        return Message({
          type: 'error',
          message: '成功，5s后关闭',
          duration: 5000
        })
      case 'info':
        return Message({
          type: 'info',
          message: '信息弹框，2s后关闭',
          duration: 2000
        })
      default:
        return Message({
          type: 'info',
          always: true,
          message: '信息弹框，2s后关闭',
          duration: 2000
        })
    }
  }
  const openLoadingMessage = (flag: string) => {
    switch (flag) {
      case 'success':
        return Message({
          type: 'loading',
          always: true,
          message: '加载 -> 成功通知'
        }).then((res) => {
          setTimeout(() => {
            res.change({
              type: 'success',
              text: '加载成功，3s后关闭该弹框'
            })
          }, 3000)
        })
      case 'error':
        return Message({
          type: 'loading',
          message: '加载 -> 错误通知',
          always: true
        }).then((res) => {
          setTimeout(() => {
            res.change({
              type: 'error',
              text: '加载失败了，该弹框需要手动关闭',
              always: true
            })
          }, 3000)
        })
      case 'warning':
        return Message({
          type: 'loading',
          message: '加载 -> 警告通知',
          always: true
        }).then((res) => {
          setTimeout(() => {
            res.change({
              type: 'warning',
              text: '加载已超时，3s后关闭该弹框'
            })
          }, 3000)
        })
      default:
        return Message({
          type: 'loading',
          message: '信息通知',
          always: true
        }).then((res) => {
          setTimeout(() => {
            res.change({
              type: 'info',
              text: '已加载，3s后关闭该弹框'
            })
          }, 3000)
        })
    }
  }
  const openMessage = (flag: string) => {
    switch (flag) {
      case 'success':
        return Message({
          type: 'success',
          message: '成功通知'
        })
      case 'error':
        return Message({
          type: 'error',
          message: '错误通知'
        })
      case 'info':
        return Message({
          type: 'info',
          message: '信息通知通知'
        })
      case 'warning':
        return Message({
          type: 'warning',
          message: '警告通知'
        })
      case 'loading':
        return Message({
          type: 'loading',
          always: true,
          message: '持续性通知'
        })
      case 'loading-success':
        return Message({
          type: 'success',
          always: true,
          message: '常显通知，须手动关闭'
        })
      default:
        return Message({
          type: 'info',
          message: '信息通知通知'
        })
    }
  }
</script>

<style lang="scss" scoped>
  .example-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    .container-left {
      width: 80%;
      margin: 0 auto;
    }
    .container-right {
      width: 18%;
      margin: 0 auto;
      .container-right-main {
        width: 18%;
        height: 85vh;
        position: fixed;
      }
    }
  }
  .--win-button {
    margin: 6px 12px;
  }
</style>
